// 获取页面元素
const form = document.querySelector("form");
const area = document.getElementById("area");
const price = document.getElementById("price");
const ratio = document.getElementById("ratio");
const years = document.getElementById("years");
const resultDiv = document.getElementById("result");


// 监听表单提交事件
form.addEventListener("submit", function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();
    
  // 思考：获取到的值需要先做数据转换吗？

  // 计算房屋总价、首付款、贷款金额、月供
  // 房屋总价公式 ： 房屋面积 * 房屋单价
  // 首付款公式： 总价 * （1 - 按揭成数 / 10）
  // 贷款金额： 总价 * （按揭成数 / 10）
  // 月供：贷款金额 / 总月数

  // 显示结果
  // 填入对应的结构
  resultDiv.innerHTML = `
        <p>房屋总价：${area.value*price.value}元</p>
        <p>首付款：${area.value*price.value*(1-ratio.value/10)}元</p>
        <p>贷款金额：${area.value*price.value*(ratio.value/10)}元</p>
        <p>贷款年限：${years.value}年</p>
        <p>贷款月数：${years.value*12}个月</p>
        <p>月供：${area.value*price.value*(ratio.value/10)/(years.value*12)}元/月</p>
        `;
});
